<?php ?>

<!-- 删除确认模态框 -->
<div id="deleteModal" class="fixed inset-0 bg-black/50 z-50 hidden flex justify-center items-center">
    <div class="card p-6 w-1/2 max-w-2xl">
        <h2 class="text-xl font-bold mb-4">确认删除</h2>
        <p class="mb-6">您确定要删除这条记录吗？此操作不可逆。</p>
        <div class="flex gap-3">
            <button id="confirmDelete" class="btn-primary">确认删除</button>
            <button id="cancelDelete" class="btn-secondary">取消</button>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const deleteButtons = document.querySelectorAll('.delete-btn');
        const modal = document.getElementById('deleteModal');
        const confirmBtn = document.getElementById('confirmDelete');
        const cancelBtn = document.getElementById('cancelDelete');
        let deleteUrl = '';

        // 点击删除按钮：显示模态框并设置删除URL
        deleteButtons.forEach(btn => {
            btn.addEventListener('click', () => {
                deleteUrl = btn.dataset.deleteUrl;
                modal.classList.remove('hidden');
            });
        });

        // 确认删除
        confirmBtn.addEventListener('click', () => {
            if (deleteUrl) {
                // 使用Fetch API发送POST请求
                fetch(deleteUrl, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    body: `id=${deleteUrl.split('id=')[1]}`
                })
               .then(data => {
                    console.log('删除成功:', data);
                    modal.classList.add('hidden');
                    window.location.reload();
                })
               .catch(error => {
                    console.error('删除失败:', error);
                    modal.classList.add('hidden');
                });
            }
        });

        // 取消删除
        cancelBtn.addEventListener('click', () => {
            modal.classList.add('hidden');
        });

        // 点击背景关闭模态框
        modal.addEventListener('click', (e) => {
            if (e.target === modal) {
                modal.classList.add('hidden');
            }
        });
    });
</script>